<template>
	<view class="wrap">
	    <view class='search acea-row row-between-wrapper'>
	    	<view class='input acea-row row-between-wrapper'>
	    		<text class='iconfont icon-sousuo2'></text>
	    		<input type='text' :value='keyword' 
				:focus="focus"
	    		placeholder='输入公交线路|公交站点|定制公交' 
	    		placeholder-class='placeholder'  @input="searchAll"
	    		maxlength="20"></input>
	    	</view>
	    	<!-- <view class='bnt' @tap='searchAll'>搜索</view> -->
	    </view>
	<!-- 	<view class="" v-if="keyword">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view> -->

        <template v-if="!keyword&&history.length">
			<view class="searchGood">
				<view class='title acea-row row-between-wrapper'>
					<view>搜索历史</view>
					<view class="iconfont icon-shanchu342" style="font-size: 18px;" @click="clear"></view>
				</view>
				<view class='list acea-row'>
					<block v-for="(item,index) in history" :key="index">
						<view class='item history-item' @tap='setHotSearchValue(item.keyword)' v-if="item.keyword">{{item.keyword}}</view>
					</block>
				</view>
			</view>       
		</template>
	<!-- 	<template v-if="!keyword&&hotSearchList.length">
			<view class="searchGood">
				<view class='title'>热门搜索</view>
				<view class='list acea-row'>
					<block v-for="(item,index) in hotSearchList" :key="index">
						<view class='item' @tap='setHotSearchValue(item.title)' v-if="item.title">{{item.title}}</view>
					</block>
				</view>
			</view>
		</template> -->
		<view v-if="sugList&&sugList.length!=0&&keyword" class="" >
			<view class="b-title">
				实时公交线路
			</view>
			<view v-if="sugList.length>=3" class="">
				<block v-for="(lineItem,lineIndex) in sugList" :key="lineIndex">
					<view v-if="lineIndex<3" class="histroy-list-item" @click="selectLine(lineItem)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan gongjiaoche"></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label" > 
							<um-texthighlight :text="lineItem.lineName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							
							<!-- <view class="rtbus-desc-label">{{lineItem.segmentName}}</view> -->
						</view>
					</view>
					<view v-if="lineIndex>=3&&rlOpen" class="histroy-list-item" @click="selectLine(lineItem)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan gongjiaoche"></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label" >
							<um-texthighlight :text="lineItem.lineName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							<!-- <view class="rtbus-desc-label">{{lineItem.segmentName}}</view> -->
						</view>
					</view>
				</block>
				<view v-if="!rlOpen&&sugList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="rlOpen=true">
						<text>展开更多</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
				<view v-if="rlOpen&&sugList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="rlOpen=false">
						<text>收起</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
			</view>
			<view v-if="sugList.length<3" class="margin-b10">
				<block v-for="(lineItem,lineIndex) in sugList" :key="lineIndex">
					<view class="histroy-list-item" @click="selectLine(lineItem)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan gongjiaoche" ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label" >
							<um-texthighlight :text="lineItem.lineName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							<!-- <view class="rtbus-desc-label">{{lineItem.segmentName}}</view> -->
						</view>
					</view>
				</block>
			</view>
			<view class="fen-line" ></view>
		</view>
		<view v-if="stationList&&stationList.length!=0&&keyword" class="" >
			<view class="b-title">
				实时公交站点
			</view>
			<view v-if="stationList.length>=3" class="">
				<block v-for="(stationItem,lineIndex) in stationList" :key="lineIndex">
					<view  v-if="lineIndex<3" class="histroy-list-item" @click="selectStation(stationItem)">
						<view class="histroy-item-icon" >
							<view class="iconfont icon-gongjiaozhanpai gongjiaochezhan" ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="stationItem.stationName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							
						</view>
					</view>
					
					<view v-if="lineIndex>=3&&zpOpen" class="histroy-list-item" @click="selectStation(stationItem)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-gongjiaozhanpai gongjiaochezhan" ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="stationItem.stationName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							
						</view>
					</view>
				</block>
				<view v-if="!zpOpen&&stationList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="zpOpen=true">
						<text>展开更多</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
				<view v-if="zpOpen&&stationList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="zpOpen=false">
						<text>收起</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
			</view>
			<view v-if="stationList.length<3" class="margin-b10">
				<block v-for="(stationItem,lineIndex) in stationList" :key="lineIndex">
					<view class="histroy-list-item"  @click="selectStation(stationItem)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan gongjiaochezhan" ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="stationItem.stationName" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							
						</view>
					</view>
				</block>
			</view>
			<view class="fen-line" ></view>
		</view>
		
		
		<view v-if="searchLineList&&searchLineList.length!=0&&keyword" class="" >
			<view class="b-title">
				定制公交线路
			</view>
			<view v-if="searchLineList.length>=3" class="">
				<block v-for="(lineItem,lineIndex) in searchLineList" :key="lineIndex">
					<view v-if="lineIndex<3" class="histroy-list-item" @click="goRegulatList(lineItem.lineId)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan dingzhigongjiao"></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="lineItem.lineSn" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							<view class="rtbus-desc-label">
								<um-texthighlight :text="lineItem.origin+'-'+lineItem.destination" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
						</view>
					</view>
					<view v-if="lineIndex>=3&&dzOpen" class="histroy-list-item" @click="goRegulatList(lineItem.lineId)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan dingzhigongjiao" ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="lineItem.lineSn" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							<view class="rtbus-desc-label">
								<um-texthighlight :text="lineItem.origin+'-'+lineItem.destination" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
						</view>
					</view>
				</block>
				<view v-if="!dzOpen&&searchLineList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="dzOpen=true">
						<text>展开更多</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
				<view v-if="dzOpen&&searchLineList.length>3" class="display-flex display-flex-justify-center" style="color: #b1b1b1;margin: 8px 0;">
					<view class="display-flex display-flex-align-center" @click="dzOpen=false">
						<text>收起</text>
						<text class="iconfont icon-xiangxia"></text>
					</view>
				</view>
			</view>
			<view v-if="searchLineList.length<3" class="margin-b10">
				<block v-for="(lineItem,lineIndex) in searchLineList" :key="lineIndex">
					<view class="histroy-list-item" @click="goRegulatList(lineItem.lineId)">
						<view class="histroy-item-icon">
							<view class="iconfont icon-qichezhan dingzhigongjiao"  ></view>
						</view>
						<view class="histroy-item-text">
							<view class="rtbus-busroute-label">
								<um-texthighlight :text="lineItem.lineSn" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
							<view class="rtbus-desc-label">
								<um-texthighlight :text="lineItem.origin+'-'+lineItem.destination" :keyword="keyword" color="#007AFF"></um-texthighlight>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="fen-line" ></view>
		</view>
		
	<!-- 	<view v-if="bastList&&bastList.length!=0&&keyword" class="" >
			<view class="b-title">
				商城产品
			</view>
			<scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="goodsreachBottom">
				<view v-if="bastList.length > 0" class="" >
					<goodList :bastList="bastList" v-if="bastList.length > 0"></goodList>
					<view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view  v-if="keyword&&bastList.length==0&&searchLineList.length==0&&sugList.length==0&&stationList.length==0" style="z-index: -1000;">
			<emptyPage title="暂无搜索结果,换个关键词试一试!～"></emptyPage>
		</view>
		
		<template v-if="!keyword">
			<view class="display-flex-align-center display-flex-column" style="color: #909090;">
				<view class="" style="margin-top: 60px;margin-bottom: 30px;font-size: 18px;">
					您可以搜索
				</view>
				<view class="display-flex display-flex-align-center" style="font-size: 14px;">
					<view class="" style="text-align: center; margin: 0 25px;">
						<view style="font-size: 22px;" class="iconfont icon-qichebanci"></view>
						<view class="">实时公交</view>
					</view>
					<view class="" style="text-align: center; margin: 0 25px;">
						<view style="font-size: 22px;" class="iconfont icon-gongjiaozhanpai"></view>
						<view class="">公交站点</view>
					</view>
					<view class="" style="text-align: center; margin: 0 25px;">
						<view  style="font-size: 22px;" class="iconfont icon-qichepiao"></view>
						<view class="">定制公交</view>
					</view>
					<!-- <view class="" style="text-align: center; margin: 0 25px;">
						<view style="font-size: 22px;" class="iconfont icon-gouwuche1"></view>
						<view class="">商城产品</view>
					</view> -->
				</view>
			</view>
			
		</template>
	</view>	
</template>

<script>
	import {Debounce} from '@/utils/validate.js'

	import {searchLineFront} from '@/api/bus.js'
	import {searchLineAndStation} from '@/api/real_bus.js'
	import emptyPage from '@/components/emptyPage.vue'
    import Cache from '../../utils/cache';
	 import { CITY_INFO} from '../../config/cache.js'
	 import {toLogin} from '@/libs/login.js';
	 import { mapGetters } from "vuex";
	 import {
	 	getSearchKeyword,
	 	getProductslist,
	 	getProductHot
	 } from '@/api/store.js';
	 import {
	 	searchList,
	 	clearSearch,
		saveUserSearch
	 } from '@/api/api.js';
	 import goodList from '@/components/goodList';
	 import recommend from '@/components/recommend';
	export default {
		components:{goodList,recommend, emptyPage},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				zpOpen: false,
				dzOpen: false,
				rlOpen: false,
				goodsOpen: false,
				background: {
					backgroundColor: '#ffffff',
				},
				resultList:[],
				type: 1,
				keyword: '',
				dzSearchFrom:{
					page:1,
					limit:50,
				},
				rlSearchFrom:{
					page:1,
					limit:50,
				},
				goodsSearchFrom:{
					
					page:1,
					limit:50,
				},
				searchLineList: [],
				trait_desc: '',
				list: [{
					name: '品质公交'
				}, {
					name: '实时公交'
				}, 
				{
					name: '产品',
				}],
				current: 0,
				hostProduct: [],
				searchValue: '',
				focus: true,
				bastList: [],
				hotSearchList: [],
				first: 0,
				limit: 50,
				page: 1,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				hotPage: 1,
				isScroll: true,
				history: [],
				sugList: [],
				stationList: [],
				
			}
		},
		onLoad(option) {	
			var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
			this.dzSearchFrom.city_id = city.id
			
			this.getHostProduct();
			
			
			if (this.isLogin) {
				this.searchList();
			}
			this.getRoutineHotSearch()
			
			// try {
			// 	this.hotSearchList = uni.getStorageSync('hotList');
			// } catch (err) {
				
			// }
			
		},
		onReachBottom: function() {
			if (this.bastList.length > 0) {
				this.getProductList();
			} else {
				this.getHostProduct();
			}
		
		},
		onReady() {
			// this.initSearch(this.dzSearchFrom)
			
		},
		methods:{
			// 跳转站点经过线路列表
			selectStation(item){
				this.saveUserSearch()
				// 跳转页面
				uni.navigateTo({
					url: `/pages/real_bus/station_list?stationName=${item.stationName}`
				})
			},
			change(index) {
				this.current = index;
			},
			dzInitSearch(data){
				var that = this
				uni.showLoading({
					title: '请稍后...'
				})
				data.keyword = this.keyword
				that.$set(that, 'searchLineList', []);
				searchLineFront(data).then(res => {
				//	that.$refs.loading.close()		
					uni.hideLoading()
					if(res.data.length)
					 {
						 that.$set(that, 'searchLineList',res.data);
					 }
					if(that.searchLineList.length!=0){
						
					}
			    }).catch(err => {
				uni.hideLoading()
			})
			},
		
		
		    //用户保存搜索记录
		    saveUserSearch(){
				if(this.isLogin){
					saveUserSearch({
						keywords: this.keyword
					}).then(res =>{
						
					})
				}
				
			},
			
			searchAll: Debounce(function(e){				
				this.$set(this, 'keyword', e.detail.value);
				let that = this;
				
				that.dzSearchFrom.page = 1
				that.searchLineList = []
				that.page = 1;
				that.loadend = false;
				that.$set(this, 'bastList', []);
				that.getProductList();
				
				that.dzInitSearch(this.dzSearchFrom)
				
				that.searchRealBusLineNew()
				
				
				// uni.showLoading({
				// 	title: '正在搜索中'
				// });
				// that.getProductList();
				uni.hideLoading();
				
				
				
			}, 1000),
			
			
			// 跳转详情
			selectLine(item){
				this.saveUserSearch()
				// 跳转页面
				uni.navigateTo({
					url: '/pages/real_bus/line_detail?lineId='+item.lineId
				})
				
				
			},
			searchRealBusLineNew(){
				let that = this;
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				// that.$set(that, 'sugList', []);
				// that.$set(that, 'stationList', []);
				searchLineAndStation({
						city_id: city.id,
						keyword: that.keyword,
					}).then(res => {
						// that.sugList = [];
						// that.stationList = [];
						// if(res.data.segmentLine.length !== 0){
							
							that.$set(that, 'sugList',res.data.segmentLine);
						// }
						// if(res.data.transitStation.length !== 0){
							that.$set(that, 'stationList', res.data.transitStation);
							
						// }
				})
			},
			
			
			// reachBottom(){
			// 	setTimeout(() => {
			// 		this.dzInitSearch(this.dzSearchFrom)
			// 	}, 200);
			// 	this.dzSearchFrom.page++
			// },
			goodsreachBottom(){
				if (this.bastList.length > 0) {
					this.getProductList();
				} else {
					this.getHostProduct();
				}
			},
			
			goRegulatList:function(line_id){
				this.saveUserSearch()
				uni.navigateTo({
					url:'/pages/bus/line_info/index?line_id='+line_id
				})
			},
			
			searchList() {
				searchList({
					page: 1,
					limit: 10
				}).then(res => {
					this.history = res.data;
				});
			},
			clear() {
				let that = this;
				clearSearch().then(res => {
					that.history = [];
				});
			},
			inputConfirm: function(event) {
				if (event.detail.value) {
					uni.hideKeyboard();
					this.setHotSearchValue(event.detail.value);
				}
			},
			// 搜索关键词高亮方法
			changeColor(result) {
			  if(!result.length) return [];
			  result.map((item, index) => {
				if (this.keyword) {
				  /**
				   * 使用正则表达式进行全文匹配关键词
				   * ig : 表示 全文查找 ,忽略大小写
				   *  i : 忽略大小写
				   *  g : 全文查找
				   *
				   * 使用字符串的replace方法进行替换
				   * stringObject.replace('被替换的值',替换的值)
					  title和name是你要高亮的字段
				   */
				  let replaceReg = new RegExp(this.keyword, "ig");
				  let replaceString = `<text style="color: #007AFF">${this.keyword}</text>`;
				  
				  if(result[index]['lineName']){
					   result[index].lineName = item.lineName.replace(replaceReg, replaceString);
				  }
				  if(result[index]['stationName']){
				  		result[index].stationName = item.stationName.replace(replaceReg, replaceString);
				  }
				  if(result[index]['lineSn']){
				  		result[index].lineSn = item.lineSn.replace(replaceReg, replaceString);
				  }
				  
				}
			  });
			 return result;
			},
	
			getRoutineHotSearch: function() {
				let that = this;
				getSearchKeyword().then(res => {
					that.$set(that, 'hotSearchList', res.data);
					console.log("hotSearchList",that.hotSearchList)
				});
			},
			getProductList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				getProductslist({
					keyword: that.keyword,
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.bastList = that.$util.SplitArray(list, that.bastList);
					that.$set(that, 'bastList', that.bastList);
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false,
						that.loadTitle = '加载更多'
				});
			},
			getHostProduct: function() {
				let that = this;
				if (!this.isScroll) return
				getProductHot(that.hotPage, that.limit).then(res => {
					that.isScroll = res.data.length >= that.limit
					that.hostProduct = that.hostProduct.concat(res.data)
					that.hotPage += 1;
				});
			},
			setHotSearchValue: function(event) {
				this.$set(this, 'keyword', event);
				let that = this;
				that.focus = false;
				that.dzSearchFrom.page = 1
				that.searchLineList = []
				that.page = 1;
				that.loadend = false;
				that.$set(this, 'bastList', []);
				that.getProductList();
				
				that.dzInitSearch(this.dzSearchFrom)
				
				that.searchRealBusLineNew()
			},
			
		}
		
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}
	.search-block{
		background-color: #ffffff;
		padding: 14rpx 25rpx;
		// position: fixed;
		width: 100%;
		top: 88rpx;
	}
	.list-title{
		margin: 12px 12px 0px 12px;
		color: #007aff;
		font-weight: 700;
	}
	.list-main{
		position: relative;
		margin: 24rpx 24rpx;
		background-color: #fff;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	
	.item-block{
		position: relative;
		padding: 24rpx 20rpx 24rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 3px 10px 0 rgba(0,0,0,.08);
	}
	.base-info{
		margin:15upx 0;
		padding: 0 6px
	}
	.price{
		font-size: 40rpx;
		font-weight: 500;
		color: #333;
	}
    .bot-item{
	  padding: 14rpx 0rpx 0 0;
	}
	.bule-cle{
		width: 116rpx;
		border-radius: 5px;
		border: 1px solid #26a2ff;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		padding: 10rpx;
		margin-left: 24rpx;
	}
	.time-text {
		color: #333;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}
	
	.search-empty{
		position: absolute;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.map-wrap{
		    height: 44px;
		    line-height: 44px;
	   left: 0;
	   top: 0;
	   width: 750rpx;
	   z-index: 9999;
	   text-align: center;
	   transition: 300ms;		
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		min-width: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding-top: 20px;
		height: 44px;
		line-height: 44px;
	}
	.nav-button{
		height: 61rpx;
		width: 178rpx;
		display: flex;
		margin-left: 16rpx;
		align-items: center;
		position: relative;
		border-radius: 32rpx;
		background: #ffffff;
		border-color: #dedede!important;

	}
	.nav-button::before {
	    content: " ";
	    position: absolute;
	    left: 50%;
	    top: 7px;
	    width: 1px;
	    height: 36px;
	    background-color: rgb(223,223,223);
	    transform: scale(.5);
	    transform-origin: 0 0;
	}
	.nav-button::after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 200%;
	    height: 200%;
	    border: 1px solid #eaeaea;
	    transform-origin: 0 0;
	    transform: scale(.5);
	    box-sizing: border-box;
	    border-radius: 32px;
	}
	.na-but{
		display: flex;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.fanhui, .home {
	    height: 100%;
	    flex: 1;
	    display: flex;
	}
	.back_icon {
	    width: 18rpx;
	    height: 33rpx;
	    margin: auto;
	}
	.home_icon {
	    width: 34rpx;
	    height: 32rpx;
	    margin: auto;
	}
	.slot-wrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}

    .noCommodity{
    	border-top-width: 0;
    }
    
    .searchGood .search {
    	padding-left: 30rpx;
    }
    
    .searchGood .search {
    	margin-top: 20rpx;
    }
    
    .searchGood .search .input {
    	// width: 598rpx;
		width: 95%;
    	background-color: #f7f7f7;
    	border-radius: 33rpx;
    	padding: 0 35rpx;
    	box-sizing: border-box;
    	height: 82rpx;
    }
    
    .searchGood .search .input input {
    	width: 472rpx;
    	font-size: 32rpx;
    }
    
    .searchGood .search .input .placeholder {
    	color: #999;
    }
    
    .searchGood .search .input .iconfont {
    	color: #555;
    	font-size: 35rpx;
    }
    
    .searchGood .search .bnt {
    	width: 120rpx;
    	text-align: center;
    	height: 66rpx;
    	line-height: 66rpx;
    	font-size: 30rpx;
    	color: #282828;
    }
    
    .searchGood .title {
    	font-size: 28rpx;
    	color: #999;
    	margin: 30rpx 30rpx 25rpx 30rpx;
    }
    
    .searchGood .title .iconfont {
    	font-size: 28rpx;
    }
    
    .searchGood .list {
    	padding-left: 10rpx;
    }
    
    .searchGood .list .item {
    	font-size: 26rpx;
    	color: #454545;
    	padding: 0 21rpx;
    	height: 60rpx;
    	border-radius: 3rpx;
    	line-height: 60rpx;
    	border: 1rpx solid #aaa;
    	margin: 0 0 20rpx 20rpx;
    }
    
    .searchGood .list .item.history-item {
    	height: 50rpx;
    	border: none;
    	border-radius: 25rpx;
    	background-color: #F7F7F7;
    	line-height: 50rpx;
    }
    
    .searchGood .line {
    	border-bottom: 1rpx solid #eee;
    	margin: 20rpx 30rpx 0 30rpx;
    }
	.histroy-list{
		padding: 0 40rpx;
		.histroy-list-item{
			display: flex;
			align-items: center;
			align-content: center;
			
			.histroy-item-icon{
				margin-right: 30rpx;
				// background-color: green;
				.icon-qichezhan{
					font-size: 40rpx;
					color: #707070;
				}
				.icon-gongjiaozhanpai{
					font-size: 50rpx;
					color: #707070;
				}
			}
			.histroy-item-text{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				padding: 20rpx 0rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.rtbus-busroute-label{
					font-size: 18px;
				}
				.rtbus-desc-label{
					color: #777777;
					font-size: 14px;
					margin-top: 6px;
				}
			}
		}
	}
	
	.b-title{
		font-size: 16px;
		font-weight: 700;
		margin: 10px;
	}
	.histroy-list-item{
			display: flex;
			align-items: center;
			align-content: center;
			
			.histroy-item-icon{
				margin-right: 30rpx;
				// background-color: green;
				.icon-qichezhan{
					font-size: 40rpx;
					color: #707070;
				}
				.icon-gongjiaozhanpai{
					font-size: 50rpx;
					color: #707070;
				}
			}
			.histroy-item-text{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				padding: 20rpx 0rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.rtbus-busroute-label{
					font-size: 18px;
				}
				.rtbus-desc-label{
					color: #9d9d9d;
					font-size: 14px;
					margin-top: 6px;
				}
			}
		}
	.fen-line{
		height: 5px;
		width: 100%;
		background-color: #ebebeb;
	}
	
	.search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}
	
	.search {
		padding-top: 20rpx;
	}
	
	.search .input {
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 90rpx;
		width: 95%;
	}
	
	.search .input input {
		flex:1;
		font-size: 30rpx;
		margin-left: 20px;
		background-color: #f7f7f7;
	}
	
	.search .input .placeholder {
		color: #bbb;
	}
	
	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}
	
	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
	
	.gongjiaoche{
		margin-left: 10px;
		font-size: 18px !important;
		color: #31d174 !important;
	}
	.gongjiaochezhan{
		margin-left: 10px;
		font-size: 18px !important;
		color: #a73cd1 !important;
	}
	
	.dingzhigongjiao{
		margin-left: 10px;
		font-size: 18px !important;
		color: #0d5cd1 !important;
	}
	
	.margin-b10{
		margin-bottom: 10px;
	}
</style>